<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit</title>
    <!-- 引入动画库 -->
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- 引入bootstrap核心css文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- swiper -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

    <!-- 引入重置样式文件 -->
    <link rel="stylesheet/less" href="css/reset.less">

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="css/common.less">

    <!-- 页面单独样式文件 -->
    <link rel="stylesheet/less" href="css/index.less">
</head>

<body>
    <!-- 最大容器 -->
    <div class="warp">
        <!-- 头部 -->
        <header>
            <!-- 导航 -->
            <nav class="navbar navbar-inverse">
                <div class="container">
                    <!-- 移动端 +　Logo -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- Logo -->
                        <a class="navbar-brand" href="#">spirit8</a>
                    </div>

                    <!-- 导航内容 -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">SERVICES</a></li>
                            <li><a href="#">portfolio</a></li>
                            <li><a href="#">testimonials</a></li>
                            <li><a href="#">CONTACT</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <!-- 广告图 -->
        <div class="banner ">
            <h1>wELCOME on <span>spirit8</span></h1>
            <small class="wow slideInLeft">We are a digital agency with <span>years of experience</span> and with <span>extraordinary
                    people</span></small>
            <div class="more wow slideInLeft">
                <img src="images/arrow.png" alt="">
            </div>
        </div>

        <!-- ABOUT -->
        <div class="about">
            <div class="container">
                <div class="row wow slideInLeft">
                    <div class="col-lg-7 col-sm-6">
                        <img src="images/about-background.png" class="img-responsive img" alt="">
                    </div>
                    <div class="col-lg-5 col-sm-6">
                        <small>ABOUT US</small>
                        <div class="title">Some words <span>about us</span></div>
                        <div class="content">
                            We love building and rebuilding brands through our
                            specific skills. Using colour, fonts, and illustration, we
                            brand companies in a way they will never forget.
                        </div>
                        <div class="box">
                            <div class="item">
                                <p><span>Mission -</span> We deliver uniqueness and quality</p>
                            </div>
                            <div class="item">
                                <p><span>Skills -</span> Delivering fast and excellent results</p>
                            </div>
                            <div class="item">
                                <p><span>Clients -</span> Satisfied clients thanks to our experience</p>
                            </div>
                        </div>

                        <div class="about-btn">
                            <img src="images/about-btn.png" alt="">
                            Browse our work
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TEAM -->
        <div class="team">
            <h1>Meet <span>our team</span></h1>
            <div class="line"></div>
            <div class="line-2"></div>
            <div class="container">
                <div class="swiper team-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="row wow slideInLeft">
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="row">
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="item">
                                        <img src="images/avatar.jpg" alt="">
                                        <div class="right">
                                            <div class="nickname">Jason Statham</div>
                                            <div class="small">Knife designer</div>
                                            <div class="content">Do not seek to change what has come before. Seek to
                                                create that which has not.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination team-pagination"></div>
                </div>
            </div>
        </div>

        <!-- SERVICES -->
        <div class="services">
            <h1>take a look at <span>our services</span></h1>
            <div class="line"></div>
            <div class="line-2"></div>
            <div class="container content">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book
                is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
                Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in sec-
                tion 1.10.32.
            </div>
            <div class="container">
                <div class="row wow slideInLeft">
                    <div class="col-md-3 col-sm-6 ">
                        <div class="item">
                            <img src="images/Forma 1.png" alt="">
                            <div class="right">
                                <div class="nickname">WEB DESIGN</div>
                                <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                                    comes from a line in section 1.10.32.</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="item">
                            <img src="images/Forma 2.png" alt="">
                            <div class="right">
                                <div class="nickname">MOBILE APPS</div>
                                <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                                    comes from a line in section 1.10.32.</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="item">
                            <img src="images/Forma 3.png" alt="">
                            <div class="right">
                                <div class="nickname">PHOTOGRAPHY</div>
                                <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                                    comes from a line in section 1.10.32.</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="item">
                            <img src="images/Forma 4.png" alt="">
                            <div class="right">
                                <div class="nickname">MARKETING</div>
                                <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
                                    comes from a line in section 1.10.32.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- CLIENTS -->
        <div class="clients">
            <h1>some of <span>our clients</span></h1>
            <div class="line"></div>
            <div class="line-2"></div>
            <div class="swiper team-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="item row wow slideInLeft">
                            <img class="img-responsive col-md-8" src="./images/logos.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="item row ">
                            <img class="img-responsive col-md-8" src="./images/logos.png" alt="">
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="item row ">
                            <img class="img-responsive col-md-8" src="./images/logos.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination team-pagination"></div>
            </div>
        </div>

        <!-- work -->
        <div class="work">
            <h1>take a look at <span>our work</span></h1>
            <div class="line"></div>
            <div class="line-2"></div>
            <div class="container content">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book
                is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
                Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in sec-
                tion 1.10.32.
            </div>
            <div class="container">
                <div class="menu">
                    <div class="title">Filter by type</div>
                    <div class="menu-nav">
                        <a href="#">ALL</a>
                        <a href="#">Web desig</a>
                        <a href="#">Mobile design</a>
                        <a href="#">Photograpy</a>
                    </div>
                    <div class="mobile-nav">
                        <select>
                            <option value="">ALL</option>
                            <option value="">Web desig</option>
                            <option value="">Mobile design</option>
                            <option value="">Photograpy</option>
                        </select>
                    </div>
                </div>
                <div class="list">
                    <div class="item wow slideInLeft" data-wow-delay="200ms">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>

                    <div class="item wow slideInLeft" data-wow-delay="400ms">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="600ms">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="800ms">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="200ms">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="400ms">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="0.6s">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="0.8s">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="0.2s">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="0.4s">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="0.6s">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                    <div class="item wow slideInLeft" data-wow-delay="0.8s">
                        <img src="images/work-img.png" alt="">
                        <div class="content">
                            <p class="title">Trend and fashion</p>
                            <p class="small-title">Website design</p>
                            <div class="box">
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TESTIMONIALS -->
        <div class="testimonials">
            <h1><span>our clients' </span>testimonials</h1>
            <div class="line"></div>
            <div class="line-2"></div>
            <div class="swiper team-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="item row wow slideInLeft">
                            <div class="text col-md-8">
                                <p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                                <span>Dean Martin, <span>CEO Acme Inc.</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="item row ">
                            <div class="text col-md-8">
                                <p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                                <span>Dean Martin, <span>CEO Acme Inc.</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="item row ">
                            <div class="text col-md-8">
                                <p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                                <span>Dean Martin, <span>CEO Acme Inc.</span></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination team-pagination"></div>
            </div>
        </div>

        <!-- contact -->
        <div class="contact">
            <h1>feel free to <span>contact us</span></h1>
            <div class="line"></div>
            <div class="line-2"></div>
            <div class="content">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular
                during the Renaissance.
            </div>
            <div class="box wow slideInLeft">
                <form>
                    <div class="form-group item">
                        <label for="name">Name <span>*</span></label>
                        <input type="text" class="form-control" id="name">
                    </div>
                    <div class="form-group item">
                        <label for="exampleInputEmail1">Email address <span>*</span></label>
                        <input type="email" class="form-control" id="exampleInputEmail1">
                    </div>
                    <div class="form-group textarea">
                        <label>Message <span>*</span></label>
                        <textarea name="Message" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-warning" type="submit">Send</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 尾部 -->
        <footer>
                <div class="row">
                    <div class="col-sm-6 left">
                        ALL RIGHTS RESERVED. COPYRIGHT © 2014 <b>SPIRIT8</b>
                    </div>
                    <div class="col-sm-6 right">
                        <img class="img-responsive" src="./images/facebook.png" alt="">
                        <img class="img-responsive" src="./images/twitter.png" alt="">
                        <img class="img-responsive" src="./images/google.png" alt="">
                        <img class="img-responsive" src="./images/linkedin.png" alt="">
                        <img class="img-responsive" src="./images/dribbble.png" alt="">
                    </div>
                </div>
        </footer>
    </div>
</body>

</html>
<!-- 引入jq -->
<script src="js/jquery-3.5.1.min.js"></script>

<!-- 引入bootstrap.js -->
<script src="js/bootstrap.min.js"></script>

<!-- swiper -->
<script src="js/swiper-bundle.min.js"></script>

<!-- 引入wow -->
<script src="js/wow.min.repeat.js"></script>

<!-- 引入less -->
<script src="js/less-4.1.3.js"></script>

<script>
    // 实例化WOW插件
    new WOW().init();

    // 实例化Swiper
    var MySwiper = new Swiper('.team-swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
    })
</script>